<template>
	<div class="page">
		<!-- 展示列表模块 -->
		<div class="headerTop">
			<!-- 搜索栏 -->
			<!-- <div class="sousuo"> -->
				<span >所属项目:</span>
				<el-select v-model="option" placeholder="选择项目" class="inpu">
					<el-option v-for="item in products" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
				<!-- <el-cascader
					class="inpu"
					v-model="option"
					:options="products"
					:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
				</el-cascader> -->
				设备名称:
				<el-input type="text" v-model="keyword" class="inpu searchinp" placeholder="输入设备名称"></el-input>
				报警时间:
				<el-date-picker v-model="value" type="daterange" align="left" unlink-panels value-format="yyyy-MM-dd"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-products="pickerproducts">
				</el-date-picker>
				<el-button type="primary" size="small" style="vertical-align:
					middle;margin-left:0.4rem;" @click="searchGoods">查询</el-button>
				<el-button type="primary" size="small" style="vertical-align: middle;" @click="showAll" v-show="all">
					刷新全部</el-button>
				<!-- <el-button type="primary" size="small" style="vertical-align:
					middle;margin-left:0.4rem;" @click="showTotal">当前报警统计</el-button> -->
			<!-- </div> -->
		</div>
		<div class="container_table">
			<el-table :data="tabledata" size="mini" border style="width: 99.4%;" :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
				'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
				}" :cell-style="{'fontSize':'0.3rem'}">
				<el-table-column label="ID" prop="id" align="center" min-width="70" fixed>
				</el-table-column>
				<el-table-column prop="product_name" label="所属项目" align="center" min-width="200">
				</el-table-column>
				<el-table-column prop="equip_name" label="设备名称" align="center" min-width="200">
				</el-table-column>
				<el-table-column label="分组名称" align="center" min-width="180">
					<template slot-scope="scope">
						<span>{{scope.row.sgroup_name?scope.row.sgroup_name:'-'}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="200">
				</el-table-column>
				<el-table-column prop="alarm_type" label="报警类型" align="center" min-width="120">
				</el-table-column> -->
				<el-table-column prop="trigger_cond" label="报警内容" align="center" min-width="200">
				</el-table-column>
				<el-table-column prop="trigger_value" label="触发值" align="center" min-width="100">
				</el-table-column>
				<el-table-column prop="alarm_time" label="报警时间" align="center" min-width="160">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change"
					:current-page="queryParams.pageNo" :page-size="queryParams.pageSize" :page-sizes="[10,15,20]"
					layout="total,
					sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'alarm',
		data() {
			return {
				//grade: 1,
				option:0,
				//option_2:'',
				products: [],
				all: false,
				//all_2:false,
				//close:false,
				//totalVisible:false,
				tableHead: localStorage.getItem("bgcolor"),
				keyword: '', //输入框内容
				queryParams: {
					pageNo: 1,
					pageSize: 15,
					total: 0
				},
				
				// queryParams_2: {
				// 	pageNo: 1,
				// 	pageSize: 15,
				// 	total: 0
				// },
				//pburl:'http://39.98.232.220:8083/',
				tabledata: [],
				//totaldata:[],
				value: [],
				pickerproducts: this.$pickerproducts

			}
		},

		created() {
			//this.grade = localStorage.getItem("grade");
            this.getProduct();
		},
		mounted() {
			this.showList(1, this.queryParams.pageSize, '', '');
		},

		methods: {
			current_change: function(currentPage) {
				this.queryParams.pageNo = currentPage;
				this.showList(currentPage, this.queryParams.pageSize, this.option, this.keyword, this.value.join('~'));
				//console.log(currentPage)
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val, this.option, this.keyword, this.value.join('~'));
			},

			showTotal() {
				this.$router.push({
					name: 'alarmTotal',
					path: '/alarmTotal',
					component: 'alarmTotal'
				});
			},
			
			
			getProduct(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.products=res.data.data;
						this.products.unshift({
							value:0,
							label:'全部'
						})
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			},
			
			// closeTotal(){
			// 	this.totalVisible = false;
			// },

			// getProduct() {
			// 	this.products=[{
			// 		value: 0,
			// 		label: '全部'
			// 	}];
			// 	this.products_2=[];
			// 	this.$http({
			// 		method: 'post',
			// 		url: 'api/product/all',
			// 		data: {}
			// 	}).then(res => { //
			// 		//console.log(res.data.data)
			// 		if (res && res.data.result == "success") {
			// 			for (var i = 0; i < res.data.data.length; i++) {
			// 				var option = {
			// 					value: res.data.data[i].id,
			// 					label: res.data.data[i].product_name
			// 				}
			// 				this.products.push(option)
			// 			}
			// 			this.products_2 = Array.from(this.products);
			// 			this.products_2.splice(0,1);
			// 			this.option = this.products[0].value;
			// 			this.option_2 = this.products_2[0].value;
			// 		}
			// 	}).catch(error => {
			// 		console.log(error);
			// 	});
			// },
			//获取数据函数
			showList: function(num, size, product, equip, time) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/alarm/lists',
						data: {
							"product_id": product,
							"equip_name": equip,
							"alarm_time": time,
							"limit": size,
							"page": num

						}
					})
					.then(res => {
						//console.log(that.$parent.yktoken)
						if (res && res.data.result == "success") {
							this.tabledata = res.data.data;
							this.queryParams.total = res.data.count;
							//console.log(res)
						}
					}).catch(error => {
						console.log(error);
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
					});
			},

			// 点击搜索输入框里的内容
			searchGoods() {
				this.all = true;
				this.queryParams.pageNo = 1;
				this.showList(1, this.queryParams.pageSize, this.option, this.keyword, this.value.join('~'));
			},
			
			// searchTotal() {
			// 	//this.all_2 = true;
			// 	this.showTotal();
			// },
			showAll() {
				this.all = false;
				this.queryParams.pageNo = 1;
				this.search_commodity = '';
				this.value = [];
				this.showList(1, this.queryParams.pageSize, 0, '');
			}
			// showAll_2() {
			// 	this.all_2 = false;
			// 	this.showTotal(0);
			// }
		}
	}
</script>
<style scoped>
	.searchinp {
		margin-right: 0.4rem;
	}

	/* 表格 */
    .container_table {
		margin-top: 0.2rem;
	}
	
	.inpu {
		vertical-align: middle;
		width: 5rem;
		font-size: 0.25rem;
		margin-right: 0.3rem;
	}
</style>
